<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org"
 xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/admin/style.css}" media="all">
</head>
<body class="layui-layout-body">
<!--顶部-->
  <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
          <div class="layui-logo">健康药房管理系统</div>
          <ul class="layui-nav layui-layout-right">
              <li class="layui-nav-item">
                  <div class="layui-icon layui-icon-username"  th:text="${session.loginUser.username}"></div>
              </li>
              &nbsp;
              &nbsp;
              <li class="layui-nav-item">
                  <div class="layui-icon layui-icon-user" th:text="${session.loginUser.role}"></div>
              </li>
              &nbsp;
              &nbsp;
              <li class="layui-nav-item">
                  <a href="/logout">注销</a>
              </li>
          </ul>
      </div>
<!--左侧菜单-->
      <div class="layui-side layui-bg-black">
          <div class="layui-side-scroll">
<!--            layui-nav-tree  垂直导航 layui-nav-side侧边导航-->
              <ul class="layui-nav layui-nav-tree layui-bg-cyan"  lay-accordion="true" >
                  <div th:if="${session.loginUser.role=='管理员'}">
                  <li class="layui-nav-item">
                      <a href="javascript:;" class="layui-nav-item">药房员工管理</a>
                      <dl class="layui-nav-child">
                          <dd><a href="#" class="site-demo-active" lay-href="/user" data-id="41" data-title="员工信息">员工信息</a></dd>
                      </dl>
                  </li>
                  </div>
                  <li class="layui-nav-item">
                      <a href="javascript:;" class="layui-nav-item">药品库存管理</a>
<!--                      二级菜单-->
                      <dl class="layui-nav-child">
                          <div th:if="${session.loginUser.role=='管理员'||session.loginUser.role=='仓库管理员'}">
                          <dd><a href="#" class="site-demo-active" lay-href="/owinfo" data-id="11" data-title="登记出入库信息">登记出入库信息</a></dd>
                          </div>
                          <dd><a href="#" class="site-demo-active" lay-href="/problem" data-id="12" data-title="问题药品记录">问题药品记录</a></dd>
                          <dd><a href="#" class="site-demo-active" lay-href="/druginfo/warranty" data-id="13" data-title="药品保质期检查">药品保质期检查</a></dd>
                      </dl>
                  </li>

                  <li class="layui-nav-item">
                      <a href="javascript:;" class="layui-nav-item">药品销售管理</a>
                      <dl class="layui-nav-child">
                          <dd><a href="#" class="site-demo-active" lay-href="/saleinfo" data-id="21" data-title="销售记录">销售记录</a></dd>
                          <dd><a href="#" class="site-demo-active" lay-href="/returngoods" data-id="22" data-title="收到退货">收到退货</a></dd>

                      </dl>
                  </li>

                  <li class="layui-nav-item">
                      <a href="javascript:;" class="layui-nav-item">药品明细管理</a>
                      <dl class="layui-nav-child">
                          <dd><a href="#" class="site-demo-active" lay-href="/druginfo" data-id="31" data-title="药品信息">药品信息</a></dd>
                      </dl>
                  </li>
                  <div th:if="${session.loginUser.role=='管理员'}">
                      <li class="layui-nav-item">
                          <a href="javascript:;" class="layui-nav-item">供应商管理</a>
                          <dl class="layui-nav-child">
                              <dd><a href="#" class="site-demo-active" lay-href="/supplier" data-id="51" data-title="供应商信息">供应商信息</a></dd>
                              <dd><a href="#" class="site-demo-active" lay-href="/returnsupplier" data-id="52" data-title="退货给供应商">退货给供应商</a></dd>
                              <dd><a href="#" class="site-demo-active" lay-href="/billinfo" data-id="53" data-title="账单信息">账单信息</a></dd>
                          </dl>
                      </li>
                  </div>
              </ul>
          </div>
      </div>
<!--主体部分-->
      <div class="layui-body">
<!--       layui-tab 选项卡 lay-allowclose="true" 可以关闭 -->
          <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin: 0;">
              <ul class="layui-tab-title"></ul>
              <div class="layui-tab-content"></div>
          </div>
      </div>
<!--底部区域-->
      <div class="layui-footer">
          健康药房    呵护您的健康
      </div>

  </div>

<script th:src="@{/static/layui/layui.js}"></script>

<script>
    layui.use(['element','layer','jquery'],function () {
       var element = layui.element;
       var $ = layui.$;

       //左侧菜单点击事件
        $('.site-demo-active').on('click',function () {
            var dataid=$(this);
            //判断右侧是否有tab
            if($(".layui-tab-title li[lay-id]").length<=0){
                //没有tab,直接打开新的tab
                active.tabAdd(dataid.attr('lay-href'),dataid.attr('data-id'),dataid.attr('data-title'));
            }else {
                //判断该tab项是否已经存在
                var isExist = false;
                $.each($(".layui-tab-title li[lay-id]"),function () {
                  //如果点击左侧菜单栏传入的id在右侧tab项中的lay-id可以找到，说明tab项已经打开
                    if($(this).attr("lay-id") == dataid.attr("data-id")){
                        isExist=true;
                    }
                })

                if(isExist == false){
                    //不存在当前id对应的tab，直接打开新的tab
                    active.tabAdd(dataid.attr('lay-href'),dataid.attr('data-id'),dataid.attr('data-title'));
                }
            }
            //不管是不是新增了tab，最后都要转到要打开的选项页面
            active.tabChange(dataid.attr("data-id"))
        })









       //配置active，绑定几个事件，后面可以用active调用这些事件
        var active ={
            //新增tab项
            //url 是页面地址 id 对应data-id name对应标题
            tabAdd:function (url,id,name) {
               element.tabAdd('demo',{
                   title:name,
                   content:'<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:800px;"></iframe>',
                   id:id
               })
            },

            //根据id切换到指定的tab
            tabChange:function (id) {
                element.tabChange('demo',id);
            },
            //关闭指定的tab
            tabDelete:function (id) {
                element.tabDelete('demo',id);
            }
        }
    });

</script>
</body>
</html>